<template>
  <el-tree
    :data="menus"
    :props="defaultProps"
    node-key="catId"
    ref="menuTree"
    @node-click="nodeClick"
  >
  </el-tree>
</template>

<script>
    export default {
      name: 'category',
      data () {
        return {
          menus: [],
          expandedKey: [],
          defaultProps: {
            children: 'children',
            label: 'name'
          }
        }
      },
      created () {
        this.getMenus();
      },
      methods: {
        // 获取菜单列表数据
        getMenus () {
          this.$http({
            url: this.$http.adornUrl('/product/category/list/tree'),
            method: 'get'
          }).then(({data}) => {
            this.menus = data.data;
          });
        },
        nodeClick (data, node, component) {
          console.log('子组件 category 的节点被点击', data, node, component)
          // 向父组件发送事件;
          this.$emit('tree-node-click', data, node, component);
        }
      }
    }
</script>

<style scoped>

</style>
